<!-- 多语言描述组件 -->
<template>
  <div class="lang-dsc">
    <el-form :model="inputList" onsubmit="return false;" ref="formInput">
      <div class="dsc-header">
        <el-form-item
          class="el-form-item"
          prop="data[0]"
          :rules="[ruleDefaultInput, ruleInput]"
        >
          <el-input
            :placeholder="getPlaceholder()"
            @blur="inputBlur(inputList.data[0], 'default')"
            @focus="inputFocus(inputList.data[0], 'default')"
            @change="inputChange"
            :maxlength="maxLength"
            ref="defaultInput"
            :disabled="isDisable"
            v-model="inputList.data[0]"
          ></el-input>
        </el-form-item>
        <div
        v-if="false"
          class="info-box"
          :class="showInput ? 'active' : ''"
          @click="setShowInput"
        >
          <span>{{ getLangName() }}</span>
          <span>{{ getSetLangLength() }}/{{ getLangListSize() }}</span>
        </div>
      </div>
      <div class="input-box" v-if="showInput">
        <div class="tab-title">
          <span
            :class="nowTab === index ? 'active' : ''"
            v-for="(item, index) in getLangList()"
            :key="index"
            @click="changeTab(index)"
            >{{ item.languageCode }}</span
          >
        </div>
        <ul class="tab-body">
          <li
            v-show="nowTab === index"
            v-for="(item, index) in getLangList()"
            :key="index"
          >
            <el-form-item
              class="el-form-item"
              :prop="'data.' + index"
              :rules="ruleInput"
            >
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                :placeholder="$t('pleaseInput') + item.languageCode"
                @blur="inputBlur(inputList.data[index], index)"
                @focus="inputFocus(inputList.data[index], index)"
                @change="inputChange"
                :maxlength="maxLength"
                ref="langInput"
                :disabled="isDisable"
                show-word-limit
                @keydown.enter.native="setNextType(index)"
                v-model="inputList.data[index]"
              ></el-input>
            </el-form-item>
            <i v-if="item.languageCode === 'EN' && isRequire">*</i>
          </li>
        </ul>
        <div class="handle-box">
          <!-- <div class="cancel"
               @click="handleCancel"><i class="el-icon-error"></i></div> -->
          <div class="confirm" @click="handleConfirm">
            <i class="el-icon-success"></i>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'LangDsc',
  props: {
    isRequire: {
      type: Boolean,
      default: true
    },
    isSpecial: {
      type: Boolean,
      default: true
    },
    testRegex: {
      type: RegExp,
      // eslint-disable-next-line
      default: () => /^(?=[0-9a-zA-Z\u4e00-\u9fa5\u00C0-\u00FF])[0-9a-zA-Z\s\u4e00-\u9fa5\d_+-./|:;'&%¿¡\*\(\)\u00C0-\u00FF]+$/i
    },
    requireInfos: {
      // 必填提示信息
      type: String,
      default: '请填写必填选项'
    },
    maxLength: {
      // 最大输入长度
      type: Number,
      default: 20
    },
    langDatas: {
      type: Object,
      required: true
    },
    optionsIdx: {
      type: Number
    },
    type: {
      type: String
    },
    isDisable: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'inputList.data': {
      handler (val, oldVal) {
        this.$emit('hasChanged')
        if (!val) return false
        const list = this.langDatas.list
        if (!list) return false
        if (this.langDatas.default) {
          this.langDatas.default.value = val[0]
        }
        list.forEach((item, index) => {
          if (!item) return
          item.value = val[index]
        })
      }
    },
    'langDatas.default.langName': {
      handler (val, oldVal) {
        const list = this.langDatas.list
        if (!list) return false
        const defaultLang = this.langDatas.default.langName
        let defaultLangIndex = 0
        const inputData = { data: [] }
        for (let i = 0; i < list.length; i++) {
          const lang = list[i]
          if (lang.languageCode === defaultLang) {
            defaultLangIndex = i
          }
          this.$set(inputData.data, i, lang.value)
        }
        this.langDatas.list.unshift(
          this.langDatas.list.splice(defaultLangIndex, 1)[0]
        )
        inputData.data.unshift(inputData.data.splice(defaultLangIndex, 1)[0])
        this.inputList = inputData
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    // 编辑框失去焦点的规则函数
    var validateInputBlur = (rule, value, callback) => {
      if (!this.isSpecial) {
        callback()
      }
      if (value) {
        //    value = value.replace(/(^\s*)|(\s*$)/g, '')
        const reg = this.testRegex
        if (!reg.test(value)) {
          callback(new Error(this.$t('specialValidateMore')))
        } else {
          callback()
        }
      }
      callback()
    }
    // 默认输入框失去焦点的规则函数
    var validateDefaultInputBlur = (rule, value, callback) => {
      if (this.isRequire && !value) {
        callback(new Error(this.requireInfos))
      }
      callback()
    }
    return {
      ruleInput: { validator: validateInputBlur, trigger: 'blur' },
      ruleDefaultInput: {
        validator: validateDefaultInputBlur,
        trigger: 'blur'
      },
      nowTab: 0,
      showInput: false,
      inputList: {
        data: ['']
      }
    }
  },
  created () {
    /* === 弹窗监听 start ==== */
    this.$watch(
      'inputList',
      function () {
        this.$emit('changeStatus')
      },
      { deep: true }
    )
    /* === 弹窗监听 end ==== */
  },
  methods: {
    // 输入框失去焦点
    inputBlur (val, index) {
      this.$emit('inputBlur', val, index, this.optionsIdx)
    },
    // 输入框获取焦点
    inputFocus (val, index) {
      this.$emit('inputFocus', val, index, this.optionsIdx)
    },
    inputChange (val, index) {
      this.$emit('setUpdate')
    },
    // 初始化 默认语言
    getLangName () {
      if (this.langDatas && this.langDatas.default) {
        return this.langDatas.default.langName
      }
      return ''
    },
    // 初始化 语言数量
    getLangListSize () {
      if (this.langDatas && this.langDatas.list) {
        return this.langDatas.list.length
      }
      return ''
    },
    // 初始化 语言list
    getLangList () {
      if (this.langDatas) {
        return this.langDatas.list
      }
      return ''
    },
    // 初始化 语言 placehoder
    getPlaceholder () {
      if (this.langDatas && this.langDatas.default) {
        return this.langDatas.default.placeholder
      }
      return ''
    },
    // 是否展示所有语言输入框
    setShowInput () {
      this.showInput = !this.showInput
    },
    // 下一步操作
    setNextType (index) {
      if (index >= this.langDatas.length) {
        this.showInput = false
        this.nowTab = 0
      } else {
        this.nowTab = index + 1
      }
    },
    // 改变语言tab
    changeTab (tab) {
      if (tab === this.nowTab) return
      this.nowTab = tab
    },
    // × 点击
    handleCancel () {
      this.showInput = false
    },
    // √ 点击
    handleConfirm () {
      this.$refs.formInput.validate((valid) => {
        if (valid) {
          this.showInput = false
        }
      })
    },
    // 获取已经填写的语言个数
    getSetLangLength () {
      if (this.langDatas && this.langDatas.list) {
        const nowArr = this.langDatas.list.filter((item) => {
          if (item && item.value) {
            return true
          }
        })
        return nowArr.length
      }
      return 0
    },
    // 获取默认值
    getDefault () {
      var defaultVal = ''
      if (!this.langDatas.list) return defaultVal
      this.langDatas.list.forEach((lang) => {
        if (lang.languageCode === 'EN') {
          defaultVal = lang.value
        }
      })
      return defaultVal
    },
    // 获取当前语言数据
    getNowLangData () {
      return this.langDatas
    },
    // 验证数据
    validateLangForm () {
      let isValid = false
      this.$refs.formInput.validate((valid) => {
        if (valid) {
          isValid = true
        }
      })
      return isValid
    }
  }
}
</script>
<style lang="scss" scoped>
.lang-dsc {
  margin-bottom: 10px;
  position: relative;
  .dsc-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.require {
      padding-bottom: 30px;
      .require-info {
        position: absolute;
        bottom: -6px;
        color: #f56c6c;
      }
      .el-input {
        border: 1px solid #f56c6c;
      }
    }
  }
  /deep/ .el-input {
    margin-bottom: 0;
  }

  .info-box {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-left: 20px;
    width: 50px;
    border: 1px solid #979797;
    border-radius: 3px;
    user-select: none;

    span {
      width: 100%;
      text-align: center;
      line-height: 20px;
      height: 20px;
    }
    span:last-child {
      background-color: #979797;
      color: #fff;
    }
    &.active {
      border-color: #00aca1;
      span:first-child {
        color: #00aca1;
      }
      span:last-child {
        background-color: #00aca1;
      }
    }
  }
  .el-form-item {
    width: 100%;
  }
  .input-box {
    margin-top: 15px;
    position: relative;
    padding: 10px;
    padding-bottom: 20px;
    padding-right: 50px;
    width: calc(100% - 60px);
    border: 1px solid #00aca1;
    .tab-title {
      line-height: 0;
      span {
        display: inline-block;
        margin-right: 10px;
        padding: 3px 15px;
        border: 1px solid #979797;
        border-bottom: none;
        line-height: 20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        cursor: pointer;
        &.active {
          background-color: #fff;
          border-color: #00aca1;
          border-bottom: 1px solid #fff;
        }
      }
    }
    .tab-body {
      margin-top: -1px;
      border: 1px solid #00aca1;
      border-radius: 5px;
      border-top-left-radius: 0;

      li {
        position: relative;

        /deep/ .el-input {
          margin-bottom: 0;
          input {
            border: none;
          }
        }

        i {
          position: absolute;
          right: -10px;
          top: 0;
          color: red;
        }
      }
    }
    .handle-box {
      position: absolute;
      right: 5px;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;
      width: 40px;

      div {
        text-align: center;
        font-size: 25px;
        &.cancel {
          color: #979797;
        }
        &.confirm {
          color: #00aca1;
        }
      }
    }
  }
}
</style>
